<template>
	<view style="min-height: 100vh;background: #F3F3F3;">
		<view class="navHead" :style="{'padding-top':statusH+'px'}">
<!--			<view class="navHeadCon">-->
<!--				<image src="../../static/index/back.png" class="back" @click="back"></image>-->
<!--				<view class="navTit">团单列表</view>-->
<!--				<view class="allChoice" @click="toExport">-->
<!--					<image src="../../static/mine/export.png"></image>-->
<!--					<view>导出</view>-->
<!--				</view>-->
<!--			</view>-->
		</view>
		<view class="emptyBox" :style="{'padding-top':statusH+'px'}"></view>
		<view class="wrap">
			<view>
				<view class="groupItem" v-for="(item,index) in list" :key="index" @click="toGroupOrder" :data-id="item.id">
					<view class="groupItemL">
						<view :style="{'background-image':'url('+getImage(item.title_image)+')'}" class="titleImg"></view>
						<view class="groupC">
							<view class="groupCT">
								<view class="groupCTL">{{item.name}}</view>
								
							</view>
							<view class="groupCB">
								<view class="groupCBL">
									<text>￥{{item.money}}</text>
									<text class="groupCTR">已售{{item.sales_volume}}</text>
								</view>
							</view>
							
						</view>
						<image src="/static/index/edit.png" class="titleImg1"></image>
					</view>
					<view @click.stop="editGroupTop" :data-index="index"
						v-if="item.is_upper_frame==0" class="groupItemR">上架</view>
					<view @click.stop="editGroupBottom" :data-index="index"
						v-if="item.is_upper_frame==1" class="groupItemR">下架</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<view class="subBtn" @click="toGroupOrder">新增团单</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				page:1,
				moreFlag:false,
				list:[],
				statusH:0
			}
		},
		onReachBottom() {
			if(!this.moreFlag){
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.getList();
		},
		onLoad() {
			uni.getSystemInfo({
				success:res=>{
					this.statusH = res.statusBarHeight;
				}
			})
		},
		onShow() {
			this.getList();
		},
		methods: {
			editGroupBottom(e) {
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let obj = {};
				obj.is_upper_frame = 0;
				obj.id = this.list[index].id;
				obj.user_id = uni.getStorageSync("userId");
				this.$u.api.shopPackageUpperLowerShelves(obj).then(res => {
					//console.log(res)
					this.$refs.uToast.show({
						title: "下架成功",
						type: "success",
						duration: 2000
					})
					let objs = this.list[index];
					objs.is_upper_frame = 0;
					this.list.splice(index, 1, objs);
				})
			},
			editGroupTop(e) {
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let obj = {};
				obj.is_upper_frame = 1;
				obj.id = this.list[index].id;
				obj.user_id = uni.getStorageSync("userId");
				this.$u.api.shopPackageUpperLowerShelves(obj).then(res => {
					console.log(res)
					this.$refs.uToast.show({
						title: "上架成功",
						type: "success",
						duration: 2000
					})
					let objs = this.list[index];
					objs.is_upper_frame = 1;
					this.list.splice(index, 1, objs);
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			toExport(){
				uni.navigateTo({
					url:"/pages/pagetwo/pages/exportGroup/exportGroup?type=td"
				})
			},
			getImage(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getList(){
				let obj = {};
				obj.page = this.page;
				//obj.data = {};
				obj.user_id = uni.getStorageSync("userId");
				// obj.is_upper_frame = 1;
				this.$u.api.shopPackageList(obj).then(res=>{
					//console.log(res)
					if(this.page == 1){
						this.list = res.list;
					}else{
						this.list = this.list.concat(res.list);
					}
					if(this.page<res.list.last_page){
						this.moreFlag = true;
					}else{
						this.moreFlag = false;
					}
				})
			},
			toGroupOrder(e){
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				if(id){
					uni.navigateTo({
						url:"/pages/pagethree/pages/GroupOrder/GroupOrder?id="+id
					})
				}else{
					uni.navigateTo({
						url:"/pages/pagethree/pages/GroupOrder/GroupOrder"
					})
				}
				
			}
		}
	}
</script>

<style scoped>
	.emptyBox{
		width: 100%;
		height: 88upx;
		box-sizing: content-box;
	}
	.navHead{
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		background: white;
		z-index: 999;
	}
	.navHeadCon{
		width: 100%;
		height: 88upx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.back{
		width: 48upx;
		height: 48upx;
		position: absolute;
		left: 24upx;
		top: 50%;
		transform: translateY(-50%);
	}
	.navTit{
		font-size: 28upx;
		color: #333333;
		line-height: 88upx;
		text-align: center;
	}
	.allChoice{
		position: absolute;
		right: 32upx;
		height: 88upx;
		top: 0;
		display: flex;
		align-items: center;
	}
	.allChoice>view{
		font-size: 28upx;
		line-height: 88upx;
		color: #333333;
	}
	.allChoice>image{
		width: 28upx;
		height: 28upx;
		margin-right: 6upx;
	}
	
	
	
	.subBtn{
		width: 100%;
		height: 100upx;
		position: fixed;
		left: 0;
		bottom: 0;
		line-height: 100upx;
		text-align: center;
		font-size: 28upx;
		color: white;
		background: #FFAC3F;
		z-index: 999;
	}
	
	
	.groupItem{
		width: 100%;
		/* padding: 32upx 0; */
		display: flex;
		align-items: center;
		margin-bottom: 16upx;
		/* border-bottom: 2upx solid #F5F5F5; */
	}
	.groupItem:last-child{
		margin-bottom: 0;
	}
	.groupItemL{
		width: calc(100% - 82upx);
		box-sizing: border-box;
		margin-right: 2upx;
		padding: 24upx;
		display: flex;
		align-items: center;
		background: white;
		border-radius: 8upx;
		height: 138upx;
	}
	.groupItemR{
		background: white;
		border-radius: 8upx;
		width: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 138upx;
		/* height: 90upx; */
		/* background: red; */
		color: red;
		/* line-height: 90upx; */
		/* text-align: center; */
		box-sizing: border-box;
		padding: 0 26upx;
		font-size: 28upx;
		
	}
	.titleImg{
		width: 90upx;
		height: 90upx;
		border-radius: 8upx;
		margin-right: 16upx;
		background-size: cover;
		background-position: center;
	}
	.titleImg1{
		width: 40upx;
		height: 40upx;
	}
	.groupC{
		width: calc(100% - 162upx);
		height: 90upx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 10upx 0 0;
		justify-content: space-between;
		margin-right: 16upx;
	}
	.groupCT{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.groupCTL{
		width: calc(100% - 120upx);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 28upx;
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
	}
	.groupCTR{
		/* width: 100upx; */
		text-align: right;
		font-size: 20upx;
		line-height: 44upx;
		color: #999999;
		margin-left: 30upx;
	}
	.groupCB{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.groupCBL{
		font-size: 24upx;
		line-height: 44upx;
		color: #FFAC3F;
		display: flex;
		align-items: center;
	}
	.groupCB>image{
		width: 44upx;
		height: 44upx;
	}
	.wrap{
		width: 100%;
		
		min-height: 100vh;
		background: #f3f3f3;
	}
	.wrap>view{
		width: 100%;
		padding: 24upx 24upx 120upx;
	}
</style>
